<template>
  <div>
    <Navbar :type="2" />
    <van-grid :column-num="2" gutter="8" :clickable="true">
      <van-grid-item
        v-for="item in goodList"
        :key="item.id"
        :to="'/detail/' + item.id"
      >
        <img :src="item.s_goods_photos[0].path" class="good-img" />
        <h3>{{ item.name }}</h3>
        <p class="desc">
          <van-text-ellipsis :content="item.desc" />
        </p>
        <p>{{ item.price }}</p>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script setup>
import { storeToRefs } from 'pinia';
import useGoodStore from '@/stores/good';
import Navbar from '@/components/navBar/Navbar.vue';
const goodStore = useGoodStore();
const { goodList } = storeToRefs(goodStore);
if (!goodList.value) goodStore.getGoodList();
</script>

<style lang="scss" scoped>
.good-img {
  width: 30vw;
}
.desc {
  width: 30vw;
}
.description {
  width: 30vw;
}
</style>
